/**
 * 修改
 */
require('../lib/weui/weui.css')
require('../fonts/iconfont.css')
require('../css/edit.less')

document.ready(function () {
  /* 选择dom */
  const nickname = document.querySelector('#nickname')
  const sex = document.querySelector('#sex')
  const birthday = document.querySelector('#birthday')
  const province = document.querySelector('#province')
  const city = document.querySelector('#city')
  const signTextarea = document.querySelector('#signTextarea')

  /* 数据回填 */
  const user = JSON.parse(window.localStorage.getItem('user'))

  // 处理地址
  let address = []
  if (user.address) {
    address = user.address.split(',')
  }

  // 回填数据
  if (user.nickname) {
    nickname.value = user.nickname
  }
  if (user.gender) {
    sex.textContent = user.gender
  }
  if (window.utils.getDate(user.birthday)) {
    birthday.textContent = window.utils.getDate(user.birthday)
  }
  if (address.length) {
    province.textContent = address[0]
    city.textContent = address[1]
  }
  if (user.sign) {
    signTextarea.value = user.sign
  }

  // 返回
  const iconBack = document.querySelector('#iconBack')
  iconBack.addEventListener('click', function () {
    window.history.back()
  })


  /* 性别 */
  document.querySelector('#showSexPicker').addEventListener('click', function () {
    // 调用weui的方法
    weui.picker([{
      label: '男',
      value: 0
    }, {
      label: '女',
      value: 1
    }], {
      // 点击确定
      onConfirm: function (result) {
        sex.textContent = result[0].label
      },
      title: '请选择性别'
    });
  });

  /* 生日 */
  document.querySelector('#showDatePicker').addEventListener('click', function () {
    // 调用日历选择器
    weui.datePicker({
      start: 1920,
      end: new Date().getFullYear(),
      onConfirm: function (result) {
        // 处理数据
        let ret = result.map(function (v) {
          return window.utils.padZero(v.value)
        })

        console.log(ret)

        // 赋值渲染
        birthday.textContent = ret.join('-')
      },
      title: '请选择生日'
    });
  });

  // 上一个事件
  let preHandleCityClick = null;

  /* 获取省份信息 */
  function getProvince() {
    window.$http.get('address/province', function (res) {
      if (res.status === 0) {

        // 循环省份数据 处理成我们要的结构
        let provinceOption = res.data.map(function (v) {
          return {
            label: v.name,
            value: v.addressId
          }
        })

        /* 省份 */
        document.querySelector('#showProvincePicker').addEventListener('click', function () {
          // 调用weui的方法
          weui.picker(provinceOption, {
            // 点击确定
            onConfirm: function (result) {
              // 渲染省份
              province.textContent = result[0].label
              // 把城市变成未选择
              city.textContent = '未选择'

              // 发送获取城市的ajax
              window.$http.get(`address/city/${result[0].value}`, function (res) {
                if (res.status === 0) {

                  // 处理城市数据 变成我们需要的格式
                  let cityOption = res.data.map(function (v) {
                    return {
                      label: v.name,
                      value: v.addressId
                    }
                  })

                  /* 处理城市点击事件 */
                  function handleCityClick() {
                    // 调用weui的方法
                    weui.picker(cityOption, {
                      // 点击确定
                      onConfirm: function (result) {
                        city.textContent = result[0].label
                      },
                      title: '请选择城市'
                    });
                  }

                  /* 城市 */
                  document.querySelector('#showCityPicker').removeEventListener('click', preHandleCityClick); // 解绑事件
                  preHandleCityClick = handleCityClick // 把城市点击的处理函数 存入一个变量中
                  document.querySelector('#showCityPicker').addEventListener('click', handleCityClick);
                }
              })

            },
            title: '请选择省份'
          });
        });

      }
    })
  }

  // 获取省数据
  getProvince()


  /* 字数限制 */
  const curCount = document.querySelector('#curCount')
  signTextarea.addEventListener('input', function (e) {
    curCount.textContent = e.target.value.length
  })

  /* 保存修改 */
  const submitBtn = document.querySelector('#submitBtn')
  submitBtn.addEventListener('click', function () {

    // 在发送ajax之前 如果参数很多  没有把握 先通过postman测试通过 然后 发送之前 先把参数准备好 打印
    let params = {
      "userId": parseInt(window.localStorage.getItem('userId')),
      "imgurl": window.localStorage.getItem('imgurl'),
      "nickname": nickname.value,
      "gender": sex.textContent,
      "birthday": birthday.textContent,
      "address": [province.textContent, city.textContent],
      "sign": signTextarea.value,
    }

    // 发送保存修改的ajax
    window.$http.post('users/userEdit', params, function (res) {
      if (res.status === 0) {
        window.utils.showToast('succ', '修改信息成功', 2000) // 弹个框
        setTimeout(function () {
          window.location.href = './mine.html' // 跳转到个人中心
        }, 2000)
      }
    })
  })

})